<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div class="report-con">

    <div class="user-info">
        <div class="title">个人信息</div>
        <div class="row">
            <div class="item"><span>姓名：</span><i id="idCardName">-</i></div>
            <div class="item"><span>手机号码：</span><i id="mobile"></i></div>
            <div class="item"><span>身份证号码：</span><i id="idCardNumber"></i></div>
        </div>
        <div class="row">
            <div class="item"><span>是否当前逾期：</span><i id="xs015"></i></div>
            <div class="item"><span>额度使⽤率（总）：</span><i id="xs010"></i></div>
            <div class="item"><span>额度使⽤率（单张最⾼）：</span><i id="xs011"></i></div>
        </div>
        <div class="row">
            <div class="item"><span>模型分：</span><i id="modelscore"></i></div>
            <div class="item"><span>模型类型：</span><i id="modeltype"></i></div>
            <div class="item"><span>是否有信贷记录：</span><i id="j0006"></i></div>
        </div>
        <div class="row">
            <div class="item"><span>p1规则结果：</span><i id="p1"></i></div>
            <div class="item"><span>p2规则结果：</span><i id="p2"></i></div>
            <div class="item"><span>p3规则结果：</span><i id="p3"></i></div>
        </div>
        <div class="row">
            <div class="item"><span>是否存在对外担保：</span><i id="xs012"></i></div>
            <div class="item"><span>担保⾦额：</span><i id="xs013"></i></div>
            <div class="item"><span>剩余担保⾦额：</span><i id="xs014"></i></div>
        </div>
        <div class="row">
            <div class="item"><span>是否存在低保救助记录：</span><i id="xs016"></i></div>
        </div>

    </div>


    <div class="title">账户情况</div>
    <div class="table">
        <table>
            <tr>
                <th>房贷账户数</th>
                <th>经营类贷款账户数</th>
                <th>未结清贷账户数</th>
                <th>除房贷以外未结清抵押/质押类贷款账户数</th>
            </tr>
            <tr>
                <td id="xs002">-</td>
                <td id="xs006">-</td>
                <td id="xs001">-</td>
                <td id="xs004">-</td>
            </tr>
            <tr>
                <th>未结清房贷账户总余额</th>
                <th>未结清经营类贷款账户余额</th>
                <th>除房贷以外未结清抵押/质押类贷款余额</th>
            </tr>
            <tr>
                <td id="xs003">-</td>
                <td id="xs007">-</td>
                <td id="xs005">-</td>
            </tr>
            <tr>
                <th>⾮循环贷账户汇总-授信总额</th>
                <th>⾮循环贷账户汇总-账户数</th>
                <th>⾮循环贷账户汇总-管理机构数</th>
                <th>⾮循环贷账户汇总-余额</th>
            </tr>
            <tr>
                <td id="c0001">-</td>
                <td id="c0002">-</td>
                <td id="c0003">-</td>
                <td id="c0005">-</td>
            </tr>
            <tr>
                <th>循环额度下分账户汇总-授信总额</th>
                <th>循环额度下分账户汇总-账户数</th>
                <th>循环额度下分账户汇总-管理机构数</th>
                <th>循环额度下分账户汇总-余额</th>
            </tr>
            <tr>
                <td id="c0008">-</td>
                <td id="c0007">-</td>
                <td id="c0009">-</td>
                <td id="c0010">-</td>
            </tr>
            <tr>
                <th>循环贷账户汇总-授信总额</th>
                <th>循环贷账户汇总-账户数</th>
                <th>循环贷账户汇总-管理机构数</th>
                <th>循环贷账户汇总-余额</th>
            </tr>
            <tr>
                <td id="c0015">-</td>
                <td id="c0011">-</td>
                <td id="c0012">-</td>
                <td id="c0014">-</td>
            </tr>
        </table>
    </div>


    <div class="title">还款及账户明细</div>
    <div class="table">
        <table>
            <tr>
                <th>⾮循环贷账户汇总-近6个⽉平均应还款</th>
                <th>循环额度下分账户汇总-近6个⽉平均应还款</th>
                <th>循环贷账户汇总-近6个⽉平均应还款</th>
            </tr>
            <tr>
                <td id="c0004">-</td>
                <td id="c0006">-</td>
                <td id="c0013">-</td>
            </tr>

        </table>
    </div>


    <div class="title">贷记卡详情</div>
    <div class="table">
        <table>
            <tr>
                <th>贷记卡授信总额（元）</th>
                <th>贷记卡已使用额度（元）</th>
                <th>贷记卡账户汇总-账户数</th>
                <th>发卡机构数</th>
                <th>准贷记卡账户汇总-账户数</th>
            </tr>
            <tr>
                <td id="c0018">-</td>
                <td id="c0017">-</td>
                <td id="c0020">-</td>
                <td id="c0022">-</td>
                <td id="c0023">-</td>
            </tr>
        </table>
    </div>


    <div class="title">征信查询详情</div>
    <div class="table">
        <table>
            <tr>
                <th>最近1个月查询次数（本人查询）</th>
                <th>近3个月贷款、信⽤卡、融资审批查询次数</th>
                <th>近6个月贷款、信⽤卡、融资审批查询次数</th>
            </tr>
            <tr>
                <td id="a0017">-</td>
                <td id="j0022">-</td>
                <td id="j0021">-</td>
            </tr>
        </table>
    </div>

</div>
<script src="/jquery-3.5.1.min.js"></script>
<script src="/url.js"></script>
<script type="text/javascript">
    let url = requestUrl + "/erupt-api/userReport/get";
    let urlSearchParams = new URLSearchParams(window.location.search);
    let tokenJson = localStorage.getItem('_token');
    let jsonObj = JSON.parse(tokenJson);
    $.ajax({
        type: "POST",
        url: url,
        headers: {
            token: jsonObj.token
        },
        data: {orderId: urlSearchParams.get('orderId'), type: 2},
        datatype: "json",
        success: function (result) {
            console.log(result)
            if (result.code == 1) {
                dataInputHtml(result.data);
            } else {
                alert(result.msg)
            }
        }
    });


    //数据填入
    function dataInputHtml(res) {
        if (res == undefined) {
            return
        }
        //所有遍历
        for (let key in res) {
            inputById(res[key], key)
        }
        let infoJson = JSON.parse(res.infoJson)
        let modelResult = JSON.parse(infoJson.result.modelResult)
        console.log(modelResult)
        for (let key in modelResult) {
            inputById(modelResult[key], key)
        }
    }

    function inputById(data, idName) {
        if (document.getElementById(idName)) {
            document.getElementById(idName).innerHTML = data
        }
    }
</script>
</body>
<style type="text/css">
    i {
        font-style: normal;
    }

    .report-con {
        background: #fff;
        color: #000;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .big-title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .desc {
        font-size: 12px;
    }

    .title {
        font-size: 20px;
        margin: 28px 0 20px;
    }

    .small-title {
        font-size: 16px;
        margin: 28px 0 20px;
        padding-left: 10px;
        position: relative;
    }

    .small-title::before {
        content: '';
        background: #1972F8;
        width: 2px;
        height: 16px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .user-info {
        margin: 30px 0 20px;
    }

    .user-info .top {
        display: flex;
        align-items: center;
    }

    .user-info .top .name {
        font-size: 16px;
        line-height: 34px;
    }

    .user-info .top .tip {
        border: 1px solid #0938F7;
        height: 28px;
        line-height: 26px;
        padding: 0 10px;
        border-radius: 17px;
        color: #0938F7;
        font-size: 12px;
        margin-left: 10px;
    }

    .user-info .row {
        display: flex;
        align-items: center;
    }

    .user-info .row .item {
        width: 300px;
        font-size: 12px;
        line-height: 30px;
        margin-top: 6px;
    }

    .user-info .row .item span {
        font-weight: bold;
    }

    .advice-title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .advice-title span {
        color: red;
        font-weight: bold;
    }

    .advice-title.level1 span {
        color: #42E61A;
    }

    .advice-title.level2 span {
        color: #22DDDD;
    }

    .advice-title.level3 span {
        color: #338FCC;
    }

    .advice-title.level4 span {
        color: #E6941A;
    }

    .advice-title.level5 span {
        color: #E61A42;
    }

    .advice-list {
        display: flex;
        margin-bottom: 30px;
    }

    .advice-list .item {
        flex: 1;
        color: #fff;
        line-height: 26px;
        text-align: center;
        font-size: 12px;
        position: relative;
    }

    .advice-list .item span {
        position: absolute;
        left: 0;
        color: #000;
        top: 100%;
    }

    .advice-list .item i {
        position: absolute;
        right: 0;
        color: #000;
        top: 100%;
    }

    .advice-list .item.level1 {
        background: #42E61A;
    }

    .advice-list .item.level2 {
        background: #22DDDD;
    }

    .advice-list .item.level3 {
        background: #338FCC;
    }

    .advice-list .item.level4 {
        background: #E6941A;
    }

    .advice-list .item.level5 {
        background: #E61A42;
    }

    .table {
        margin-bottom: 20px;
    }

    .table table {
        width: 100%;
        table-layout: fixed;
        font-size: 12px;
        line-height: 36px;
        border-left: 1px solid #D9DAE2;
        border-top: 1px solid #D9DAE2;
        border-collapse: collapse;
    }

    .table table tr th {
        border-right: 1px solid #D9DAE2;
        border-bottom: 1px solid #D9DAE2;
        background: #ECEDF0;
    }

    .table table tr td {
        border-right: 1px solid #D9DAE2;
        border-bottom: 1px solid #D9DAE2;
        text-align: center;
        padding: 0;
    }
</style>
</html>
